<template>
  <view class="home-app d-flex flex-column">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <!--pages/detail/detail.wxml-->
    <view class="post_contain">
      <tabbarTop class="tabbarTop" tabbarName="岗位详情"></tabbarTop>
      <view class="p_content">
        <view class="p_top">
          <view>
            <view class="type">{{ itemDetail.positionTypeLabel }}</view>{{ itemDetail.positionName }}
          </view>
          <view class="secLine">
            <view class="info">
              <view v-for="item in itemDetail.labels" :key="item">{{ item.labelName || '' }}</view>
              <view>{{ itemDetail.calculationTypeLabel || '' }}</view>
              <view>{{ itemDetail.educationLabel || '' }}</view>
              <view>{{ itemDetail.experienceLabel || '' }}经验</view>
            </view>
          </view>
          <view class="t_three">
            <view class="calendar">
              <uni-icons type="calendar" size="24" style="margin-right: 10rpx;"></uni-icons>
              <text v-if="itemDetail.usageTimeType == 1">{{ itemDetail.startUsageTime || '' }}{{ itemDetail.startUsageTime
                ? '~' : '' }}{{ itemDetail.endUsageTime
    || ''
  }}</text>
              <text v-if="itemDetail.usageTimeType == 2">短期</text>
              <text v-if="itemDetail.positionTypeLabel === '全职' && itemDetail.calculationTypeLabel === '月结'">长期</text>
            </view>
          </view>
          <view class="t_bot">
            <view>
              <text>￥</text>
              <text style="color: #ff9e24; font-size: 30rpx">{{ itemDetail.startSalary || '' }}</text>
              <text style="color: #ff9e24; font-size: 30rpx" v-if="itemDetail.endSalary">~{{ itemDetail.endSalary || ''
              }}</text>
              <text>/{{ itemDetail.salaryPeriodLabel || '' }}</text>
            </view>
            <view class="save" @click="handleCollect">
              <image v-if="state" src="/static/images/recruit/collect_2.png" mode="" />
              <image v-else src="/static/images/recruit/collect_1.png" mode="" />
              <text :class="state ? 'active' : ''">收藏</text>
            </view>
          </view>
          <view class="t_last">
            <image :src="itemDetail.logeUrl" mode="" />
            <view>
              <view>{{ itemDetail.fullName || '' }}</view>
              <view>{{ itemDetail.industrySector || '' }} | {{ itemDetail.enterpriseNature || '' }} | {{
                itemDetail.enterpriseScale || ''
              }}
              </view>
            </view>
          </view>
        </view>
        <view class="p_middle">
          <view class="p_text">工作地点&环境</view>
          <view class="p_location">
            <view class="left">
              <image src="/static/images/recruit/location2.png" mode="" />
              <text>{{ itemDetail.cityLabel || '' }}-{{ itemDetail.areaLabel ? itemDetail.areaLabel : ''
              }}-{{ itemDetail.streetLabel ? itemDetail.streetLabel : '' }}-{{
  itemDetail.detailedAddress || '' }}</text>
            </view>
            <image src="/static/images/recruit/location1.png" mode="" @click="handleGoLocation(itemDetail)" />
          </view>
          <view class="p_swiperImg">
            <view>
              <image v-for="(item, index) in itemDetail.fileObjs" :key="index" :src="item.url"
                @click="handlePreviewImage(item.url)" />
            </view>
          </view>
        </view>
        <view class="p_reduct">
          <view class="text">职位描述</view>
          <view class="line">
            <view> {{ itemDetail.description || '' }} </view>
          </view>
        </view>
        <view class="p_btn">
          <button v-if="itemDetail.states == 0" class="btn_active" @click="handleGoSumit">立即申请</button>
          <button v-else class="btn_inertia">已申请</button>
        </view>
      </view>
      <!-- 弹窗 -->
      <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" v-if="positionType === '1' && isShowVerify">
        <view class="dialog">
          <view class="dialogTop">
            <view class="success"> 请完善资料 </view>

            <view class="close" @click="close">
              <image class="image" src="@/static/images/emterpriseVip/close.png" mode="aspectFit|aspectFill|widthFix"
                lazy-load="false" binderror="" bindload="" />
            </view>
          </view>
          <view class="d_content">
            <view class="text">为保证您的提现及时到账，建议提前3~7日完善您的信息</view>
            <view class="c_one">
              <view class="header">
                <view class="circle"></view>
                <view class="text">完善身份证信息</view>
              </view>
              <view v-if="isFinishForm.isIdentity === '1'" class="finish">已认证</view>
              <view class="btn" @click="goReal" v-else>
                去完善
              </view>
            </view>
            <view class="c_one">
              <view class="header">
                <view class="circle"></view>
                <view class="text">完善银行账号信息</view>
              </view>
              <view v-if="isFinishForm.isBank === '1'" class="finish">已完善</view>
              <view class="btn" @click="goBank" v-else>
                去完善
              </view>
            </view>
          </view>
          <view class="d_bootom">
            <view @click="close" class="d_left">先申请，稍后完善</view>
            <view @click="close" class="d_right">已完善，立即申请</view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import {
  applyJobs,
  collect,
  getCollectState,
  getJobsDetail,
} from "@/api/pages/home";
import { verify } from "@/api/common"

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "岗位详情",
      },
      state: false,
      positionId: "",
      positionType: "",
      seUserId: this.$store.state.user.wxUserId,
      itemDetail: {
        areaLabel: "",
        calculationTypeLabel: "",
        cityLabel: "",
        description: "",
        detailedAddress: " ",
        educationLabel: "",
        endSalary: "",
        endUsageTime: "",
        entArea: "",
        entCity: "",
        entProvince: "",
        enterpriseId: "",
        enterpriseNature: "",
        enterpriseScale: "",
        experienceLabel: "",
        fileObj: {},
        fileObjs: [{ ossId: "", fileName: "" }],
        fullName: "",
        industryLabel: "",
        industrySector: "",
        labelObj: {},
        labels: [{ labelId: "", labelName: "" }],
        latitude: "",
        logeUrl: "",
        longitude: "",
        positionId: "",
        positionName: "",
        positionTypeLabel: "",
        provinceLabel: "",
        recruitmentCount: "",
        salaryPeriodLabel: "",
        startSalary: "",
        startUsageTime: "",
        states: "",
        url: { ossId: "", fileName: "" },
        urlObj: {},
        usageTimeType: "",
      },
      isFinishForm: {

      },
      isShowVerify: false
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) {
    this.positionId = options.positionId;
    this.positionType = options.positionType;
    this.jobsDetail();
  },
  async onShow() {
    this.collectState();
    verify().then((res) => {
      console.log(res);
      if (res.code === 200) {
        this.isFinishForm = res.data
        if (this.isFinishForm.isIdentity === '0' || this.isFinishForm.isBank === '0') {
          this.isShowVerify = true
        }
      }
    })
  },
  mounted() {
    console.log("岗位详情-页面加载完成");
  },
  onReady() { },
  methods: {
    jobsDetail() {
      getJobsDetail(this.positionId).then((res) => {
        if (res.code == 200) {
          this.itemDetail = res.data;
        }
        console.log(res, "岗位详情-res");
      });
    },
    // 申请岗位
    handleGoSumit() {
      if (uni.getStorageSync('userInfoStatus')) {
        let params = {
          positionId: this.positionId,
          seUserId: this.seUserId,
        };
        applyJobs(params).then((res) => {
          if (res.code == 200) {
            uni.navigateTo({
              url: "/pages/recruit/post/successApply/index",
            });
          }
        });
      } else {
        if (this.positionType === "1") {
          uni.setStorageSync('userInfoStatus', 1)
          this.$refs.popup.open("center");
        } else {
          let params = {
            positionId: this.positionId,
            seUserId: this.seUserId,
          };
          applyJobs(params).then((res) => {
            if (res.code == 200) {
              uni.navigateTo({
                url: "/pages/recruit/post/successApply/index",
              });
            }
          });
        }
      }
    },

    // 跳转身份认证页
    goReal() {
      uni.navigateTo({
        url: "/pages/recruit/mine/verificationName/index",
      });
    },

    // 跳转银行信息页
    goBank() {
      uni.navigateTo({
        url: "/pages/recruit/mine/bank/index",
      });
    },

    close() {
      this.$refs.popup.close();
    },

    // 获取收藏状态
    collectState() {
      getCollectState(this.positionId).then((res) => {
        console.log(res, "获取收藏状态-res");
        this.state = res;
        // if (res.code == 200) {
        // }
      });
    },
    // 点击切换收藏状态
    handleCollect() {
      this.state = !this.state;
      // 收藏
      collect({
        positionId: this.positionId,
        state: this.state,
      }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    // 点击放大图片
    handlePreviewImage(url) {
      const imageArr = [];
      this.itemDetail.fileObjs.forEach((i) => {
        imageArr.push(i.url);
      });
      uni.previewImage({
        urls: imageArr,
      });
    },
    // 跳转门店位置页面
    handleGoLocation(res) {
      console.log(res)
      // 打开手机安装的地图app
      uni.openLocation({
        latitude: Number(res.latitude),
        longitude: Number(res.longitude),
        name: res.detailedAddress,
        address: res.detailedAddress,
        scale: 18,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-app {
  position: relative;
  background-color: #fff !important;
  height: 100%;

  /* pages/detail/detail.wxss */
  .post_contain {
    width: 100%;
    height: 100vh;
    background-color: #fff !important;

    .p_content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      >view {
        width: 700rpx;
      }

      .p_top {
        height: 416rpx;
        background: #ffffff;
        box-shadow: 4rpx 4rpx 16rpx 6rpx #3c3c3c14;
        border-radius: 16rpx;
        margin: 20rpx;
        padding: 20rpx;
        width: 90%;

        >view {
          display: flex;
          margin-top: 10px;
        }

        .type {
          background: #34a1ff;
          margin: 0 10rpx;
          border-radius: 4px;
          padding: 4px 8px;
          color: #fff;
          font-size: 22rpx;
        }

        .secLine {
          .info {
            display: flex;
            flex-wrap: wrap;

            >view {
              background: #f5f5f5;
              border: 1px solid #cfcfcf;
              padding: 4px 8px;
              border-radius: 5px;
              margin: 0 3px;
              font-size: 20rpx;
              color: #000000a3;
              margin-top: 10rpx;
            }
          }
        }

        .t_three {
          font-size: 24rpx;
          color: #00000073;
        }

        .calendar {
          display: flex;
          align-items: center;
        }

        .t_bot {
          font-size: 24rpx;
          display: flex;
          justify-content: space-between;

          image {
            width: 36rpx;
            height: 36rpx;
          }

          .save {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;

            .active {
              color: #ed8e16;
            }

            >text {
              margin-left: 5px;
            }
          }
        }

        .t_last {
          display: flex;
          margin-top: 20px;

          image {
            width: 80rpx;
            height: 80rpx;
          }

          >view {
            margin-left: 10px;
            font-size: 24rpx;
            color: #00000073;

            >view:first-child {
              font-size: 28rpx;
              color: #000;
              margin-bottom: 5px;
            }
          }
        }
      }

      .p_middle {
        height: 365rpx;
        background: #fff;
        margin: 20rpx;
        padding: 20rpx;
        width: 90%;

        .p_text {
          font-size: 36rpx;
          color: #000000e0;
        }

        .p_location {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;

          .left {
            display: flex;
            align-items: center;
            width: 90%;

            >image {
              width: 20%;
              width: 32rpx;
              height: 32rpx;
              margin-right: 5px;
            }

            >text {
              width: 80%;
              font-size: 28rpx;
              color: #000000a3;
            }
          }

          >image {
            width: 56rpx;
            height: 56rpx;
          }
        }

        .p_swiperImg {
          overflow: auto;

          >view {
            width: 900rpx;
            display: flex;
          }

          image {
            width: 270rpx;
            height: 195rpx;
            margin-right: 16rpx;
            border-radius: 16rpx;
          }
        }
      }

      .p_reduct {
        width: 90%;

        .text {
          font-size: 36rpx;
          color: #000000e0;
          margin: 10px 0;
        }

        .line {
          font-size: 28rpx;
          color: #00000073;
        }
      }

      .p_btn {
        display: flex;
        justify-content: center;
        margin-top: 80rpx;

        .btn_active {
          width: 420rpx;
          height: 88rpx;
          background: #ff9e24;
          border-radius: 44rpx;
          color: #fff;
          text-align: center;
          line-height: 88rpx;
          font-size: 32rpx;
        }

        .btn_inertia {
          width: 420rpx;
          height: 88rpx;
          background: #818181;
          border-radius: 44rpx;
          color: #fff;
          text-align: center;
          line-height: 88rpx;
          font-size: 32rpx;
        }
      }
    }
  }
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 670rpx;
  height: 758rpx;
  background-image: linear-gradient(180deg,
      #fff6eb 1%,
      #ffffff 6%,
      #ffffff 100%);
  border-radius: 32rpx;

  .dialogTop {
    display: flex;
    justify-content: space-between;
    padding: 32rpx;

    .success {
      width: 100%;
      height: 50rpx;
      font-weight: 700;
      font-size: 36rpx;
      color: #000000e0;
      text-align: center;
      line-height: 50rpx;

    }

    .close {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .d_content {
    width: 100%;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    >.text {
      width: 90%;
      color: #000000e0;
      margin-bottom: 20rpx;
    }

    >.c_one {
      width: 90%;
      margin-bottom: 20rpx;

      .header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .circle {
          width: 15rpx;
          height: 15rpx;
          background: #ccc;
          border-radius: 15rpx;
          margin-right: 20rpx;
        }

        .text {
          color: #000000a3;
          font-size: 32rpx;
        }
      }

      .btn {
        width: 150rpx;
        height: 60rpx;
        border-radius: 8rpx;
        background: #34a1ff;
        color: #fff;
        text-align: center;
        line-height: 60rpx;
        font-size: 24rpx;
        margin-left: 30rpx;
      }

      .finish {
        font-size: 28rpx;
        color: #ccc;
      }
    }
  }

  .d_bootom {
    width: 100%;
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 24rpx;
    justify-content: center;
    padding: 0 20rpx;
    box-sizing: border-box;

    .d_left {
      width: 250rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #000000e0;
      border-radius: 250rpx;
      border: 1px solid #ccc;
      margin: 0 30rpx;
    }

    .d_right {
      width: 250rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      border-radius: 250rpx;
      margin: 0 30rpx;
      background: #ff9e24;
    }
  }
}
</style>
